<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryFormRef" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="合同年份" prop="year">
        <el-date-picker 
          v-model="queryParams.year" 
          type="year" 
          placeholder="选择年" 
          format="YYYY年" 
          value-format="YYYY">
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
        <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="季度统计" name="first">
        <el-table v-loading="loading" :data="quarterList">
          <el-table-column label="季度" align="center" prop="quarter" width="160" />
          <el-table-column label="采购合同金额" align="center" prop="purchaseContractTotal" />
          <el-table-column label="采购退款金额" align="center" prop="purchaseReturnTotal" />
          <el-table-column label="销售合同金额" align="center" prop="saleContractTotal" />
          <el-table-column label="销售退款金额" align="center" prop="saleReturnTotal" />
          <el-table-column label="总收入" align="center" prop="incomeTotal" />
          <el-table-column label="总支出" align="center" prop="outcomeTotal" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="月份统计" name="second">
        <el-table v-loading="loading" :data="monthList">
          <el-table-column label="月份" align="center" prop="month" width="100" />
          <el-table-column label="采购合同金额" align="center" prop="purchaseContractTotal" />
          <el-table-column label="采购退款金额" align="center" prop="purchaseReturnTotal" />
          <el-table-column label="销售合同金额" align="center" prop="saleContractTotal" />
          <el-table-column label="销售退款金额" align="center" prop="saleReturnTotal" />
          <el-table-column label="总收入" align="center" prop="incomeTotal" />
          <el-table-column label="总支出" align="center" prop="outcomeTotal" />
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup name="FinanceReport">
import { ref, reactive, onMounted } from 'vue'
import { getCurrentInstance } from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue'
import { financeReportByMonth, financeReportByQuarter } from "@/api/saleReport/saleContractReport"

const { proxy } = getCurrentInstance()

const activeName = ref('first')
const currentYear = ref(new Date().getFullYear().toString())
// 遮罩层
const loading = ref(true)
// 显示搜索条件
const showSearch = ref(true)
// 总条数
const total = ref(0)
// 销售合同报表表格数据
const monthList = ref([])
// 销售合同报表表格数据
const quarterList = ref([])

// 查询参数
const queryParams = reactive({
  year: currentYear.value,
  quarter: null,
  month: null
})

const queryFormRef = ref()

/** 查询销售合同报表列表 */
const getList = async () => {
  loading.value = true
  try {
    const [monthResponse, quarterResponse] = await Promise.all([
      financeReportByMonth(queryParams),
      financeReportByQuarter(queryParams)
    ])
    monthList.value = monthResponse.rows
    quarterList.value = quarterResponse.rows
  } catch (error) {
    console.error('获取报表数据失败:', error)
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  proxy?.resetForm("queryFormRef")
  queryParams.year = currentYear.value
  handleQuery()
}

onMounted(() => {
  getList()
})
</script>
